/* eslint-disable */
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var config = require('./webpack.config');

var app = new (require('express'))();
var port = 3000;

var compiler = webpack(config);
// Webpack本身只有打包功能，但是把这个中间件连入Express服务器后，就可以将Webpack的打包功能与Express服务器的资源服务功能合二为一
// Express服务器通过该中间件完成打包工作，并将打包好的资源读到内存中，接下来我们就可以通过Express服务器的端口来访问这些资源了。不仅如此，该中间件该可以监视代码变动，一旦代码变动，就会停止提供旧版的资源服务，等到编译完成后继续提供新的资源服务。
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
// 更新代码后保留程序状态
app.use(webpackHotMiddleware(compiler));

app.get("/", function(req, res) {
    res.sendFile(__dirname + '/index.html')
});

app.listen(port, function(error) {
    if (error) {
        console.error(error)
    } else {
        console.info("==> 🌎  Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
    }
});



// 总结:
// 1. 使用开发服务器和热替换需要配置Babel、Webpack、Express。
// 2. Babel的配置主要是在ES2015和React预设的基础上，使用了react-hmre这个预设。
// 3. Webpack的配置包括：使用webpack-hot-middleware/client作为入口文件，包含new web-pack.optimize.OccurrenceOrderPlugin和new webpack.HotModuleReplacementPlugin()插件等。
// 4. Express的配置则是使用了webpackDevMiddleware和webpackHotMiddleware这两个中间件。


